<extend name="Layout/base" />
<block name="css">
	<style>
		.el-main {
			padding: 0 20px;
			border: 1px solid #ccc;
			height: 100%;
		}
		.project {
			display: flex;
			border-bottom: 1px solid #ccc;
			padding-top: 20px;
		}
		.upimgs {
			display: flex;
			justify-content: space-around;
			padding: 20px 0;
		}
		.title {
			font-size: 20px;
			margin-left: 20px;
		}
		.filetitle {
			font-size: 20px;
			margin-top: 20px;
			margin-left: 20px;
		}
		.logoimg {
			display: flex;
			align-items: center;
			margin-top: 20px;
			margin-left: 20px;
		}
		.logoimg .title {
			margin-right: 10px;
		}
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 80px;
			height: 80px;
			line-height: 80px;
			text-align: center;
		}
		.avatar {
			width: 80px;
			height: 80px;
			display: block;
		}
		.upload {
			margin-left: 20px;
		}
		.el-form {
			background: #fff;
			padding-bottom: 20px;
			margin: 0 0 20px;
		}
		.metal {
			width: 50%;
		}
		.metal .title {
			display: flex;
			justify-content: center;
		}
		.inputs {
			display: flex;
			align-items: flex-end;
		}
		.inputs .el-input {
			width: 210px;
			margin-right: 20px;
		}
		.metalitem {
			display: flex;
			color: #fff;
			margin-top: 8px;
			justify-content: space-around;
		}
		.metalitem span {
			display: inline-block;
			width: 30%;
			text-align: center;
		}
		.addnew {
			color: #fff;
			font-size: 20px;
			margin-top: 20px;
		}
		.subaccount {
			width: 50%;
			text-align: center;
		}
		.subaccount .workerinfo {
			width: 100%;
			display: flex;
			justify-content: center;
		}
		.editinfo {
			text-align: center;
			font-size: 15px;
			margin-top: 10px;
		}
		.editinfo span {
			border: 1px solid #ccc;
			padding: 3px 8px;
		}
		.baseinfo p {
			margin-top: 10px;
		}
		.baseinfo p span {
			margin-left: 20px;
		}
		.el-select .el-input {
			width: 105px;
		}
		.pagetitle {
			color: #409EFF;
			font-size: 20px;
			background: #fff;
			padding: 10px 20px;
			border-bottom: 1px solid #ccc;
		}
	</style>
</block>
<block name="content">
	<div class="pagetitle">创建客户账号</div>
	<el-form ref="form" :model="param" label-width="110px">
		<div class="project">
			<div class="title">客户信息</div>
			<el-form-item label="公司简称">
				<el-input size="small" v-model="param.company_ak" placeholder="请输入"></el-input>
			</el-form-item>
		</div>
		<div class="project">
			<div class="title">登录信息</div>
			<div>
				<el-form-item label="使用者姓名">
					<el-input size="small" v-model="param.name" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="登录手机">
					<el-input size="small" v-model="param.mobile" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="登录密码">
					<el-input size="small" v-model="param.password" show-password placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="密码确定">
					<el-input size="small" v-model="param.repassword" show-password placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="项目负责人">
					<el-autocomplete
							v-model="search_input"
							:fetch-suggestions="querySearchAsync"
							value-key="nickname"
							placeholder="请输入内容"
							@select="handleSelect"
					></el-autocomplete>
				</el-form-item>
			</div>
			<div class="subaccount">
				<div @click="addaccount=true" v-if="!subaccount" style="font-size: 18px;"><i class="el-icon-circle-plus" style="color:blue;margin-right: 4px;"></i><span>添加子账号</span></div>
				<div class="account" v-if="subaccount">
					<div class="workerinfo">
						<div class="infotitle">子账号信息
							<div class="editinfo"><span @click="addaccount=true">修改</span></div>
						</div>
						<div class="baseinfo">
							<div>
								<p><span>用户昵称</span><span>{{subname}}</span></p>
								<p><span>登录手机</span><span>{{subphone}}</span></p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="project">
			<div class="title">公司信息</div>
			<div>
				<el-form-item label="公司名称">
					<el-input size="small" v-model="param.company_name" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="法人代表">
					<el-input size="small" v-model="param.corporation_name" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="联系方式">
					<el-input size="small" v-model="param.telephone" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="公司地址">
					<el-select size="small" v-model="param.province" placeholder="省">
						<el-option label="广东" value="guangdong"></el-option>
						<el-option label="广西" value="guangxi"></el-option>
						<el-option label="福建" value="fujian"></el-option>
					</el-select>
					<el-select size="small" v-model="param.city" placeholder="市">
						<el-option label="深圳" value="shenzhen"></el-option>
						<el-option label="桂林" value="guilin"></el-option>
						<el-option label="厦门" value="xiamen"></el-option>
					</el-select>
					<el-select size="small" v-model="param.area" placeholder="市">
						<el-option label="南山" value="shenzhen"></el-option>
						<el-option label="福田" value="guilin"></el-option>
						<el-option label="罗湖" value="xiamen"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="详细地址">
					<el-input size="small" v-model="param.address" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="行业">
					<el-input size="small" v-model="param.industry" placeholder="请输入"></el-input>
				</el-form-item>
			</div>
			<!-- todo 材料信息 -->
			<div class="metal">
				<div class="title">
					<div>材料信息<div style="text-align: center;" v-if="metalList.length!==0"><span style="border: 1px solid #ccc; font-size: 14px;padding: 3px 6px;" @click="addmetal = true" >修改材料</span></div></div>
					<span @click="addmetal = true" v-if="metalList.length==0"><i class="el-icon-circle-plus" style="color: blue;margin-left: 20px;margin-right: 5px;"></i><span>添加材料</span></span>
					<div v-else v-for="(item, index) in metalList" :key="index">
						<span style="margin-left: 20px;">{{item.name}}</span>
						<span style="margin-left: 20px;">{{item.price}}元/平方米</span>
					</div>
				</div>
			</div>
		</div>
		<div class="filetitle">相关文件</div>
		<div class="upimgs">
			<div class="logoimg">
				<div class="userlogo">营业执照</div>
				<div class="upload">
					<el-upload class="avatar-uploader" :data="uploadParam" :action="uploadUrl" :show-file-list="false" :on-success="handleBusinessLicenseSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="param.full_business_license" :src="param.full_business_license" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
			</div>
			<div class="logoimg">
				<div class="userlogo">合同</div>
				<div class="upload">
					<el-upload class="avatar-uploader" :data="uploadParam" :action="uploadUrl" :show-file-list="false" :on-success="handleContractSuccess"  :before-upload="beforeAvatarUpload">
						<img v-if="param.full_contract" :src="param.full_contract" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
			</div>
			<div class="logoimg">
				<div class="userlogo">法人身份证</div>
				<div class="upload">
					<el-upload class="avatar-uploader" :data="uploadParam" :action="uploadUrl" :show-file-list="false" :on-success="handleCertidFrontSuccess"  :before-upload="beforeAvatarUpload">
						<img v-if="param.full_certid_front" :src="param.full_certid_front" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<div class="upload">
					<el-upload class="avatar-uploader" :data="uploadParam" :action="uploadUrl" :show-file-list="false" :on-success="handleCertidSideSuccess"  :before-upload="beforeAvatarUpload">
						<img v-if="param.full_certid_side" :src="param.full_certid_side" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
			</div>
		</div>
		<el-form-item>
			<el-button type="primary" @click="add">创建账号</el-button>
			<el-button>取消</el-button>
		</el-form-item>
	</el-form>
	<el-dialog title="添加材料" :visible.sync="addmetal">
		<div v-for="(item, index) in metalList" :key="index" class="metalitem">
			<span>材料： {{item.name}}</span>
			<span>价格： {{item.price}}元/平方米</span>
			<span><i class="el-icon-error" style="color: red;" @click="deleteone(index)"></i></span>
		</div>
		<div class="inputs" v-if="addnew">
			<el-input size="small" placeholder="请输入材料名" v-model="metalname"></el-input>
			<el-input size="small" placeholder="请输入金额" v-model="metalprice">
				<template slot="append">元/平方米</template>
			</el-input>
			<div><el-button type="primary" @click="addOneMetal">完成</el-button></div>
		</div>
		<div class="addnew" v-else @click="addnew = true"><i class="el-icon-circle-plus-outline" style="margin-right: 5px;"></i>添加材料</div>
		<div class="dialogbtn">
			<el-button type="primary" size="medium" @click="addmetal =false">确定</el-button>
			<el-button @click="addmetal =false">取消</el-button>
		</div>
	</el-dialog>
	<el-dialog title="添加子账号" :visible.sync="addaccount" width="450px">
		<el-input size="small" placeholder="请输入用户昵称" v-model="subname"></el-input>
		<el-input size="small" placeholder="请输入登录手机号" v-model="subphone"></el-input>
		<el-input size="small" placeholder="请输入密码" v-model="subpassword" show-password></el-input>
		<div class="dialogbtn">
			<el-button type="primary" size="medium" @click="confirmAdd">确定</el-button>
			<el-button @click="addaccount =false">取消</el-button>
		</div>
	</el-dialog>
</block>
<block name="js">
	<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    param: {
                        type: 'add',
                        business_license: "",
                        contract: "",
                        certid_front: "",
                        certid_side: "",
                        full_business_license: "",
                        full_contract: "",
                        full_certid_front: "",
                        full_certid_side: "",
                    },
                    addnew: false,
                    addmetal: false,
                    imageUrl: "",
                    metalname: "",
                    metalprice: "",
                    metalList: [],
                    addaccount: false,
                    subaccount: false,
                    subname: "",
                    subphone: "",
                    subpassword: "",

					// 图片上传
                    uploadUrl: HOME_URL + "/Admin/File/upload",
                    uploadParam: {
                        type: '',
                        size: 0
                    },
                    // 远程搜索
                    search_input:'',
                }
            },
            created() {
                this.getMateriels();
            },
            methods: {
                add() {
                    var _this = this;
                    _this.param.metalList = _this.metalList;
                    $.post(HOME_URL+"/orderAdmin/Audit/update", _this.param, function (data) {
                        if(data.status){
                            _this.$message({
                                type: 'success',
                                message: '创建成功'
                            });
                            setTimeout(function () {
                                location.href = HOME_URL + "/orderAdmin/Audit/index";
                            }, 1000);
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },

                addOneMetal() {
                    if (this.metalname && this.metalprice) {
                        this.metalList.push({"name": this.metalname,"price": this.metalprice})
                        this.addnew = false
                        this.metalname = ""
                        this.metalprice = ""
                    } else {
                        this.$notify.info({
                            title: '提示',
                            message: '请完善所有信息'
                        });
                    }
                },
                confirmAdd() {
                    if (this.subname && this.subphone && this.subpassword) {
                        this.addaccount = false
                        this.subaccount = true
                    } else {
                        this.$notify.info({
                            title: '提示',
                            message: '请完善所有信息'
                        });
                    }
                },
                deleteone(index) {
                    this.metalList.splice(index,1)
                },


                handleBusinessLicenseSuccess(res, file) {
                    this.param.business_license = file.response.data.fileid;
                    this.param.full_business_license = URL.createObjectURL(file.raw);
                },
                handleContractSuccess(res, file) {
                    this.param.contract = file.response.data.fileid;
                    this.param.full_contract = URL.createObjectURL(file.raw);
                },
                handleCertidFrontSuccess(res, file) {
                    this.param.certid_front = file.response.data.fileid;
                    this.param.full_certid_front = URL.createObjectURL(file.raw);
                },
                handleCertidSideSuccess(res, file) {
                    this.param.certid_side = file.response.data.fileid;
                    this.param.full_certid_side = URL.createObjectURL(file.raw);
                    console.log(this.param);
                },
                beforeAvatarUpload(file) {
                    this.uploadParam.type = file.name.split('.')[1];
                    this.uploadParam.size = file.size;
                },
                // 远程搜索
                getMateriels: function () {
                    $.post(HOME_URL + '/orderAdmin/Audit/getMateriels', {id: _this.param.id}, function (data) {
                        if(data.status){
                            _this.metalList = data.data;
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
                querySearchAsync(queryString, cb) {
                    var _this = this;
                    $.post(HOME_URL+"/orderAdmin/Admin/getManagerIds", {}, function (data) {
                        if(data.status){
                            cb(data.data);
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
                handleSelect(item) {
                    this.param.project_manager_id = item.id;
                }
            }
        });
	</script>
</block>